<template>
  <div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <barrage :linecount="1" :data="textlist"></barrage>
        <div :class="'head2 ' + imgTop">
          <a @click="$router.push({path: '/'})" class="return"></a>
          <router-link to="/Prize" tag="div" class="icon"><img src="../../assets/recreation/icon.png" alt="">
          </router-link>
        </div>
        <div class="recommend">
          <div class="title-hd2">
            <span>{{$t('Snatch.v1')}}</span>
            <van-tag color="#f2826a" style="float: right;" @click="more(1)">{{$t('Snatch.v2')}}</van-tag>
          </div>
          <div class="product" v-if="list2.treasure.records != ''">
            <div class="product_list" v-for="item in list2.treasure.records" :key="item.id"
                 @click="$router.push({path: '/Details',query: { type : item.id, typeName: 'Snatch'}})">
              <div class="product_hd weui-flex">
                <div class="weui-flex__item">
                  <!--<span>6</span> 时
                  <span>1</span> 分
                  <span>8</span> 秒后截止-->
                  <van-count-down :time="item.lotteryTime - item.systemTime" format="DD 天 HH 时 mm 分 ss 秒后开奖" v-if="leng == 1" />
                  <van-count-down :time="item.lotteryTime - item.systemTime" format="DD D HH T mm M ss S Post-launch" v-if="leng == 2 || leng == undefined" />
                  <van-count-down :time="item.lotteryTime - item.systemTime" format="DD D HH T mm M ss S Thứ hai Hậu ra mắt" v-if="leng == 3" />
                </div>
                <div>
                  {{$t('Snatch.v3')}}
                  <span v-text="item.number">13546</span> {{$t('Snatch.v4')}}
                </div>
              </div>
              <div class="product_content weui-flex">
                <div class="img"><img :src="item.picture" alt="" style="width: 100px;height: 100px;"></div>
                <div class="weui-flex__item">
                  <div class="bt" v-text="item.title">苹果手机 标题 in苹果核4G通许手机</div>
                  <div class="btm">
                    <div class="price">
                      <span>¥</span>
                      <span v-text="item.price ? parseFloat(item.price).toFixed(3).slice(0,-1) : '0'">2000</span>
                    </div>
                    <div class="state state1" v-if="item.state == 1">{{$t('Snatch.v5')}}</div>
                    <div class="state state2" v-if="item.state == 0" style="font-size: 13px;">
                      <span v-text="item.addc ? item.addc : '0'"></span>
                      <span>&nbsp;EXUU</span>
                      <span>{{$t('Snatch.v6')}} &gt</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--<van-row class="prediction" v-if="list4 != ''">
            <van-col class="p1" span="6">
              <div>明日预告</div>
              <div>惊喜不断</div>
            </van-col>
            <van-col span="9" v-for="item in list4" :key="item.id">
              <div class="weui-flex">
                <div><img :src="item.picture" alt=""></div>
                <div>
                  <span class="price" v-text="'¥ ' + item.price ? parseFloat(item.price).toFixed(3).slice(0,-1) : '0'">¥1235.00</span>
                  <div class="go" @click="$router.push({path: '/Details',query: { type : item.id}})">去看看</div>
                </div>
              </div>
            </van-col>
          </van-row>-->
        </div>
        <div class="title-hd2" v-if="list.treasure.records != ''">
          <span>{{$t('Snatch.v7')}}</span>
          <van-tag style="float: right;" @click="more(2)">{{$t('Snatch.v2')}}</van-tag>
        </div>
        <div class="product" v-if="list.treasure.records != ''">
          <div class="product_list" v-for="item in list.treasure.records" :key="item.id"
               @click="$router.push({path: '/Details',query: { type : item.id,typeName: 'Snatch'}})">
            <div class="product_hd weui-flex">
              <div class="weui-flex__item">
                <!--<span>6</span> 时
                <span>1</span> 分
                <span>8</span> 秒后截止-->
                <van-count-down :time="item.lotteryTime - item.systemTime" format="DD 天 HH 时 mm 分 ss 秒后开奖" v-if="leng == 1" />
                <van-count-down :time="item.lotteryTime - item.systemTime" format="DD D HH T mm M ss S Post-launch" v-if="leng == 2 || leng == undefined" />
                <van-count-down :time="item.lotteryTime - item.systemTime" format="DD D HH T mm M ss S Thứ hai Hậu ra mắt" v-if="leng == 3" />
              </div>
              <div>
                {{$t('Snatch.v3')}}
                <span v-text="item.number">13546</span> {{$t('Snatch.v4')}}
              </div>
            </div>
            <div class="product_content weui-flex">
              <div class="img"><img :src="item.picture" alt="" style="width: 100px;height: 100px;"></div>
              <div class="weui-flex__item">
                <div class="bt" v-text="item.title">苹果手机 标题 in苹果核4G通许手机</div>
                <div class="btm">
                  <div class="price">
                    <span>¥</span>
                    <span v-text="item.price ? parseFloat(item.price).toFixed(3).slice(0,-1) : '0'">2000</span>
                  </div>
                  <div class="state state1" v-if="item.state == 1">{{$t('Snatch.v5')}}</div>
                  <div class="state state2" v-if="item.state == 0" style="font-size: 13px;">
                    <span v-text="item.addc ? item.addc : '0'"></span>
                    <span>&nbsp;EXUU</span>
                    <span>{{$t('Snatch.v6')}} &gt</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="title-hd2" v-if="list3 != ''">
          <span>{{$t('Snatch.v8')}}</span>
        </div>
        <div class="product" v-if="list3 != ''">
          <div class="product_list" v-for="item in list3" :key="item.id"
               @click="$router.push({path: '/Details',query: { type : item.id,typeName: 'Snatch'}})">
            <div class="product_content weui-flex">
              <div class="img"><img :src="item.picture" alt="" style="width: 100px;height: 100px;"></div>
              <div class="weui-flex__item">
                <div class="bt" v-text="item.title">苹果手机 标题 in苹果核4G通许手机</div>
                <div class="red">
                  <span>{{$t('Snatch.v9')}}</span>
                  <span v-text="item.price ? parseFloat(item.price).toFixed(3).slice(0,-1) : '0'">2000</span>
                </div>
                <div class="btm c1" v-if="item.name == null">
                  <div class="">{{$t('Snatch.v10')}}</div>
                  <!--<div class="" v-text="item.lotteryTime + ' 公布抽奖结果'">2019.03.05 21:30公布抽奖结果</div>-->
                  <div class="">
                    {{ item.lotteryTime | dateFormat }}
                    <span>&nbsp;{{$t('Snatch.v11')}}</span>
                  </div>
                </div>
                <div class="btm" v-if="item.name != null">
                  <div v-if="item.typeId == 2" style="color:#999;font-size:12px;padding:3px;">{{$t('Snatch.v12')}}</div>
                  <div v-if="item.typeId == 1" style="color:#999;font-size:12px;padding:3px;">{{$t('Snatch.v13')}}</div>
                  <div class="state state3">
                    <img src="../../assets/recreation/logo2.png" alt=""/>
                    <span v-text="item.name + ' ' + $t('Snatch.v15')" style="font-size: 13px;">javascript夺得宝贝</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    let _this;
    import {Dialog} from 'vant';
    import {recreation} from './../../utils/api';
    import barrage from './../../views/barrage';
    import {dateFormat} from 'vux';

    export default {
        data() {
            return {
                textlist: [],
                list: {
                    'treasure': {
                        'records': []
                    },
                    'win': []
                },
                size: 1000, // 每页数量
                list2: {
                    'treasure': {
                        'records': []
                    },
                    'win': []
                },
                size2: 2, // 每页数量
                list3: [],
                size3: 1000, // 每页数量
                list4: [],
                leng: '',
                imgTop: ''
            }
        },
        components: {
            barrage
        },
        beforeCreate() {
            _this = this;
            window.RAF = (function () {
                return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
            })();
            if (!window.cancelAnimationFrame)
                window.cancelAnimationFrame = function (id) {
                    clearTimeout(id);
                };
        },
        created() {

        },
        mounted() {
            this.leng = localStorage.leng;
            if(this.leng == 1){
                this.imgTop = 'imgTop';
            }else if(this.leng == 2 || this.leng == undefined){
                this.imgTop = 'imgTop2';
            }else if(this.leng == 3){
                this.imgTop = 'imgTop3';
            }
            this.getList(); // 精选抽奖
            this.getList2(); // 超级抽奖
            this.getList3(); // 近期抽奖
            //this.getList4(); // 明日预告
            this.initList();
        },
        methods: {
            initList() {
                this.myInterval = window.setInterval(() => {
                    setTimeout(() => {
                        this.getList(); // 精选抽奖
                        this.getList2(); // 超级抽奖
                        this.getList3(); // 近期抽奖
                    }, 1);
                }, 1000);
            },
            getList() { // 抽奖分类查询-精选
                recreation.getTreasureType({
                    current: 1,
                    size: this.size
                }).then(res => {
                    if (res.code == 200) {
                        this.list = res.data;
                    }
                })
            },
            getList2() { // 抽奖分类查询-超级
                recreation.getTreasureType2({
                    current: 1,
                    size: this.size2
                }).then(res => {
                    if (res.code == 200) {
                        this.list2 = res.data;
                        let arr = new Array;
                        for (let i = 0; i < this.list2.win.length; i++) {
                            arr.push(this.list2.win[i].name + ' ' + this.$t('Snatch.v14') + this.list2.win[i].commodity);
                        }
                        this.textlist = arr;
                    }
                })
            },
            getList3() { // 近期抽奖
                recreation.getFutureTreasure({
                    current: 1,
                    size: this.size3
                }).then(res => {
                    if (res.code == 200) {
                        this.list3 = res.data.records;
                    }
                })
            },
            getList4() {
                recreation.getTomorrow().then(res => {
                    if (res.code == 200) {
                        this.list4 = res.data;
                    }
                })
            },
            more(type) {
                sessionStorage.setItem("typeID", type);
                this.$router.push({
                    name: 'More',
                })
            }
        },
        destroyed() {
            clearInterval(this.myInterval);
        },
        filters: {
            dateFormat
        }
    }
</script>

<style lang="less" scoped>
  .overlay {
    background: rgb(245, 245, 245);
  }

  .head2 {
    /*background: url(../../assets/recreation/hd_bj.png) no-repeat;*/
    background-size: contain;
    padding-bottom: 47.866%;
    position: relative;
    z-index: 99;

    .return {
      position: absolute;
      left: 0;
      top: 0;
      width: 45px;
      height: 45px;
      z-index: 99;
    }

    .return:after {
      content: " ";
      display: inline-block;
      height: 9px;
      width: 9px;
      border-width: 2px 2px 0 0;
      border-color: #FFFFFF;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
      transform: rotate(225deg);
      left: 16px;
      top: 17px;
    }

    .icon {
      position: absolute;
      right: 6px;
      top: 6px;
      padding: 10px;

      img {
        width: 20px;
      }
    }
  }

  .red {
    color: #f94951;
  }

  .recommend {
    margin: 10px;
    padding-bottom: 10px;
    background: url(../../assets/recreation/bj.png) no-repeat;
    background-size: cover;
  }

  .prediction {
    margin: 0 10px 10px;
    background: #fff;
    padding: 4px 10px;
    border-radius: 6px;

    .p1 {
      color: #333;
      font-size: 14px;
    }

    img {
      width: 40px;
      margin-right: 10px;
      vertical-align: middle;
      position: relative;
      top: 4px;
    }

    .price {
      color: #666;
      text-decoration: line-through;
      font-size: 12px;
    }

    .go {
      display: inline-block;
      background: #f94951;
      color: #fff;
      font-size: 12px;
      border-radius: 10px;
      padding: 0 10px;
    }
  }

  .van-count-down, .van-divider {
    line-height: 20px;
    color: #f94951;
  }

  .imgTop {
    /*background: url(../../assets/recreation/hd_bj.png) no-repeat;*/
    background: url(../../assets/recreation/stest.jpg) no-repeat;
    background-size: contain;
  }

  .imgTop2 {
    /*background: url(../../assets/recreation/hd_bj2.png) no-repeat;*/
    background: url(../../assets/recreation/stest.jpg) no-repeat;
    background-size: contain;
  }

  .imgTop3 {
    /*background: url(../../assets/recreation/hd_bj3.png) no-repeat;*/
    background: url(../../assets/recreation/stest.jpg) no-repeat;
    background-size: contain;
  }
</style>
